<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: focus
  Date: 2018/1/8
  Time: 10:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>${topic.topicName} - WeCenter 社交化问答社区程序</title>
    <meta name="keywords" content="${topic.topicName}" />
    <meta name="description" content="WeCenter 是一款知识型的社交化问答社区程序，专注于社区内容的整理、归类和检索，并通过连接微信公众平台，移动APP进行内容分发。"  />
    <link href="css/default/img/favicon.ico?v=20160523" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/icon.css" />
    <link href="css/default/common.css?v=20160523" rel="stylesheet" type="text/css" />
    <link href="css/default/link.css?v=20160523" rel="stylesheet" type="text/css" />
    <link href="js/plug_module/style.css?v=20160523" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var _7BE05E90ECC0EEE1B2EAA04F5D170709="";
        var G_POST_HASH=_7BE05E90ECC0EEE1B2EAA04F5D170709;
        var G_INDEX_SCRIPT = "";
        var G_SITE_NAME = "WeCenter 社交化问答社区程序";
        var G_BASE_URL = "http://wenda.wecenter.com";
        var G_STATIC_URL = "http://wenda.wecenter.com/static";
        var G_UPLOAD_URL = "http://wenda.wecenter.com/uploads";
        var G_USER_ID = "";
        var G_USER_NAME = "";
        var G_UPLOAD_ENABLE = "N";
        var G_UNREAD_NOTIFICATION = 0;
        var G_NOTIFICATION_INTERVAL = 100000;
        var G_CAN_CREATE_TOPIC = "";
        var G_ADVANCED_EDITOR_ENABLE = "Y";
        var FILE_TYPES = "jpg,jpeg,png,zip,rar,7z";
    </script>
    <script src="js/jquery.2.js?v=20160523" type="text/javascript"></script>
    <script src="js/jquery.form.js?v=20160523" type="text/javascript"></script>
    <script src="js/plug_module/plug-in_module.js?v=20160523" type="text/javascript"></script>
    <script src="js/aws.js?v=20160523" type="text/javascript"></script>
    <script src="js/aw_template.js?v=20160523" type="text/javascript"></script>
    <script src="js/app.js?v=20160523" type="text/javascript"></script>
    <script type="text/javascript" src="js/compatibility.js"></script>
    <!--[if lte IE 8]>
    <script type="text/javascript" src="js/respond.js"></script>
    <![endif]-->
</head>
<noscript unselectable="on" id="noscript">
    <div class="aw-404 aw-404-wrap container">
        <img src="common/no-js.jpg">
        <p>你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!</p>
    </div>
</noscript>
<body>
<%@ include file="../common/header.jsp"%>

<div class="aw-container-wrap">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="aw-global-tips">
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="aw-content-wrap clearfix">
                <div class="col-sm-12 col-md-9 aw-main-content">
                    <div class="aw-mod aw-topic-detail-title">
                        <div class="mod-body">
                            <img src="common/topic-mid-img.png" alt="${topic.topicName}" />
                            <h2 class="pull-left">${topic.topicName} </h2>
                            <c:if test="${sessionScope._current_user ne null}">
                                <c:if test="${!focus}">
                                    <div class="aw-topic-operate text-color-999">
                                        <a href="javascript:" onclick="AWS.User.follow($(this), 'topic', ${topic.id});" class="follow btn btn-normal btn-success"><span>关注</span> <em>|</em> <b>${topic.concernNumber}</b></a>
                                    </div>
                                </c:if>
                                <c:if test="${focus}">
                                    <div class="aw-topic-operate text-color-999">
                                        <a href="javascript:" onclick="AWS.User.follow($(this), 'topic', ${topic.id});" class="follow btn btn-normal btn-success active"><span>取消关注</span> <em>|</em> <b>${topic.concernNumber}</b></a>
                                    </div>
                                </c:if>
                            </c:if>
                        </div>
                    </div>

                    <div class="aw-mod aw-topic-list-mod">
                        <div class="mod-head">
                            <div class="tabbable">
                                <!-- tab 切换 -->
                                <ul class="nav nav-tabs aw-nav-tabs hidden-xs">
                                    <%--<li class="active"><a href="#all" data-toggle="tab">全部内容</a></li>--%>
                                    <li class="active"><a href="#questions" data-toggle="tab">问题</a></li>
                                    <li><a href="#articles" data-toggle="tab">文章</a></li>
                                    <div class="aw-search-bar pull-right hidden-xs">
                                        <i class="icon icon-search"></i>
                                        <input type="text" id="question-input" class="search-query form-control" placeholder="搜索...">
                                        <div class="aw-dropdown">
                                            <p class="title">没有找到相关结果</p>
                                            <ul class="aw-dropdown-list"></ul>
                                        </div>
                                    </div>
                                </ul>
                                <!-- end tab 切换 -->
                            </div>
                        </div>

                        <div class="mod-body">
                            <!-- tab 切换内容 -->
                            <div class="tab-content">
                                <%--<div class="tab-pane active" id="all">
                                    <!-- 推荐问题 -->
                                    <!-- end 推荐问题 -->
                                    <div class="aw-mod">
                                        <div class="mod-body">
                                            <div class="aw-common-list" id="c_all_list">
                                                <c:forEach var="q" items="${topic.involveQuestions}">
                                                <div class="aw-item active" data-topic-id="${topic.id}">
                                                    <a class="aw-user-name hidden-xs" data-id="${q.user.id}" href="http://wenda.wecenter.com/people/zara%E5%A4%96%E8%B4%B8%E6%9D%82%E8%B4%A7" rel="nofollow">
                                                        <img src="http://wenda.wecenter.com/uploads/avatar/000/02/98/61_avatar_max.jpg" alt="" />
                                                    </a>
                                                    <div class="aw-question-content">
                                                    <h4>
                                                        <a href="question/${q.id}">${q.title}</a>
                                                    </h4>
                                                    <a href="question/${q.id}#!answer_form" class="pull-right text-color-999">回复</a>
                                                    <p>
                                                        <a href="http://wenda.wecenter.com/people/zara%E5%A4%96%E8%B4%B8%E6%9D%82%E8%B4%A7" class="aw-user-name">${q.user.username}</a>
                                                        <span class="text-color-999">发起了问题 • ${q.concernNumber} 人关注 • ${q.answerCount} 个回复  • <fmt:formatDate value="${q.createTime}" pattern="yyyy-MM-dd HH:mm" />				</span>
                                                    </p>
                                                    </div>
                                                </div>
                                                </c:forEach>
                                            </div>
                                        </div>
                                        &lt;%&ndash;<div class="mod-footer">
                                            <a class="aw-load-more-content" id="c_all_more" auto-load="false">
                                                <span>更多...</span>
                                            </a>
                                        </div>&ndash;%&gt;
                                    </div>
                                </div>--%>

                                <div class="tab-pane active" id="questions">
                                    <div class="aw-mod">
                                        <div class="mod-body">
                                            <div class="aw-common-list" id="c_question_list">
                                                <c:forEach var="q" items="${topic.involveQuestions}">
                                                    <div class="aw-item active" data-topic-id="${topic.id}">
                                                        <a class="aw-user-name hidden-xs" data-id="${q.user.id}" href="http://wenda.wecenter.com/people/zara%E5%A4%96%E8%B4%B8%E6%9D%82%E8%B4%A7" rel="nofollow">
                                                            <img src="http://wenda.wecenter.com/uploads/avatar/000/02/98/61_avatar_max.jpg" alt="" />
                                                        </a>
                                                        <div class="aw-question-content">
                                                            <h4>
                                                                <a href="question/${q.id}">${q.title}</a>
                                                            </h4>
                                                            <a href="question/${q.id}#!answer_form" class="pull-right text-color-999">回复</a>
                                                            <p>
                                                                <a href="http://wenda.wecenter.com/people/zara%E5%A4%96%E8%B4%B8%E6%9D%82%E8%B4%A7" class="aw-user-name">${q.user.username}</a>
                                                                <span class="text-color-999">发起了问题 • ${q.concernNumber} 人关注 • ${q.answerCount} 个回复  • <fmt:formatDate value="${q.createTime}" pattern="yyyy-MM-dd HH:mm" />				</span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </c:forEach>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="articles">
                                    <!-- 动态首页&话题精华模块 -->
                                    <div class="aw-mod">
                                        <div class="mod-body">
                                            <div class="aw-common-list" id="c_articles_list">
                                                <c:forEach var="a" items="${topic.involveArticle}">
                                                <div class="aw-item article" data-topic-id="5, ">
                                                    <a class="aw-user-name hidden-xs" data-id="${a.createUser.id}" href="people/${a.createUser.username}" rel="nofollow">
                                                        <img src="http://wenda.wecenter.com/uploads/avatar/000/02/00/67_avatar_max.jpg" alt="" />
                                                    </a>
                                                    <div class="aw-question-content">
                                                    <h4>
                                                        <a href="article/${a.id}">${a.title}</a>
                                                    </h4>

                                                    <p>
                                                        <a href="people/${a.createUser.username}" class="aw-user-name">${a.createUser.username}</a>
                                                        <span class="text-color-999">发表了文章 • ${a.commentCount} 个评论 • <fmt:formatDate value="${a.createTime}" pattern="yyyy-MM-dd HH:mm" /></span>
                                                    </p>

                                                    <!-- 文章内容调用 -->
                                                    <div class="markitup-box">
                                                        <div class="img pull-right"></div>
                                                        <c:choose>
                                                            <c:when test="${fn:length(a.content) <= 200}">
                                                                ${a.content}
                                                            </c:when>
                                                            <c:otherwise>
                                                                ${fn:substring(a.content, 0, 200)}
                                                                <a class="more" href="article/${a.id}">查看全部</a>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </div>
                                                    <!-- end 文章内容调用 -->
                                                </div>
                                                </div>
                                                </c:forEach>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end 动态首页&话题精华模块 -->
                                </div>
                            </div>
                            <!-- end tab 切换内容 -->
                        </div>
                    </div>
                </div>

                <!-- 侧边栏 -->
                <div class="col-sm-12 col-md-3 aw-side-bar hidden-xs">
                    <!-- 话题描述 -->
                    <div class="aw-mod aw-text-align-justify">
                        <div class="mod-head">
                            <h3>话题描述</h3>
                        </div>
                        <div class="mod-body">
                            ${topic.topicDescription}
                        </div>
                    </div>
                    <!-- end 话题描述 -->

                    <!-- xx人关注该话题 -->
                    <div class="aw-mod topic-status">
                        <div class="mod-head">
                            <h3>${topic.concernNumber} 人关注该话题</h3>
                        </div>
                    </div>
                    <!-- end xx人关注该话题 -->

                </div>
                <!-- end 侧边栏 -->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var TOPIC_ID = '${topic.id}';

    var CONTENTS_TOPIC_ID = '${topic.id}';
    var CONTENTS_RELATED_TOPIC_IDS = '${topic.id}';
    var CONTENTS_TOPIC_TITLE = '${topic.topicName}';
</script>

<script type="text/javascript" src="js/app/topic.js"></script>
<a class="aw-back-top hidden-xs" href="javascript:;" onclick="$.scrollTo(1, 600, {queue:true});"><i class="icon icon-up"></i></a>
<div id="aw-ajax-box" class="aw-ajax-box"></div>
</body>
</html>
